<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

    <div id="app">

        <el-container >
            <el-header style="margin-bottom: 2rem;">
                Header content

                <el-menu mode="horizontal" default-active="3" @select="">
                    <el-menu-item index="1">item 1</el-menu-item>
                    <el-menu-item index="2">item 1</el-menu-item>
                    <el-menu-item index="3">item 1</el-menu-item>
                    <el-menu-item index="4">item 1</el-menu-item>
                    <el-menu-item index="5">item 1</el-menu-item>
                    <el-submenu :index="6">
                        <template slot="title">子菜单</template>
                        <el-menu-item>AAA</el-menu-item>
                        <el-menu-item>AAA</el-menu-item>
                        <el-menu-item>AAA</el-menu-item>
                        <el-menu-item>AAA</el-menu-item>
                    </el-submenu>
                    
                </el-menu>


                <h1>
                    <span style="font-weight: lighter; color: #409EFF; font-size: 2rem;">国宾旅行</span>
                    <span style="font-weight: lighter; color: #909399; font-size: 1rem;">牛耳科技</span>
                </h1>

                <el-avatar icon="el-icon-user-solid" size="large" shape="circle"  fit="fill">登录</el-avatar>

            </el-header>
            <el-container >
                <el-aside>
                    
                    <el-menu  default-active="2" >
                        <el-submenu v-for="(submenus, index) in menus"
                            :index="index + 1"
                            :key="submenus.key">
                            <template slot="title">{{submenus.title}}</template>
                            <el-menu-item v-for="(item, subIndex) in submenus.menus"
                                :index="(index + 1) + '-' + (subIndex + 1)"
                                :key="item.key">
                                    {{item.title}}
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                    

                </el-aside>
                <el-container >
                    <el-main height="">
                        <el-page-header @back="" content="出行计划"></el-page-header>

                        <el-table :data="tbData" stripe>
                            <el-table-column v-for="col in columns"
                                :prop="col.id"
                                :key="col.id"
                                :label="col.label">
                            </el-table-column>
                            <el-table-column
                                label="操作">
                                <el-button type="primary" size="default" @click="">编辑</el-button>
                                <el-button type="danger" size="default" @click="">删除</el-button>
                                
                            </el-table-column>
                            
                        </el-table>
                        
                        
                        <el-calendar  :first-day-of-week="1"></el-calendar>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
        
        
        
    </div>
    
</body>

  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                columns: [
                    {
                        id: 'id',
                        label: '编号'
                    },
                    {
                        id: 'title',
                        label: '名称'
                    },
                    {
                        id: 'price',
                        label: '价格'
                    },
                    {
                        id: 'info',
                        label: '描述'
                    },
                ],
                tbData: [],
                items: [
                    {
                        title: 'a',
                        key: '1'
                    },
                    {
                        title: 'b',
                        key: '2'
                    },
                    {
                        title: 'c',
                        key: '3'
                    },
                ],
                menus: [
                    {
                        title: 'title 1',
                        key: '1',
                        menus: [
                            {
                                title: 'a',
                                key: 1.1
                            },
                            {
                                title: 'b',
                                key: 1.2
                            },
                        ]
                    },
                    {
                        title: 'title 1',
                        key: '1',
                        menus: [
                            {
                                title: 'a',
                                key: 1.1
                            },
                            {
                                title: 'b',
                                key: 1.2
                            },
                        ]
                    },
                    {
                        title: 'title 1',
                        key: '1',
                        menus: [
                            {
                                title: 'a',
                                key: 1.1
                            },
                            {
                                title: 'b',
                                key: 1.2
                            },
                        ]
                    },
                ]
            }
        },
        methods: {
            
        },
        created() {
            let data = {
                id: 1,
                title: 'title',
                price: 199,
                info: 'about'
            };
            for (let index = 0; index < 10; index++) {
                this.tbData.push(data);
            }
        },
    })
</script>
</html>